<template>
    <svg class="icon" aria-hidden="true" :style="'width:'+size+';height:'+size">
        <use :xlink:href="iconInstance"></use>
    </svg>
</template>

<script>
    export default {
        name: "devIcon",
        data () {
            return {
            }
        },
        props : {
            size:{
                type: String,
                default: '35px'
            },
            icon:{
                type: String,
                default: '#icon-noziyuan'
            },
            tags:{
                type: String,
                default: ''
            }
        },
        computed: {
            // eslint-disable-next-line vue/return-in-computed-property
            iconInstance () {
              if(this.isNull())                   {return'#icon-wu'}
              if(this.has('jvm'))          {return'#icon-jvm'}
              if(this.has('docker'))       {return'#icon-docker1'}
              if(this.has('oracle'))       {return'#icon-oracle'}
              if(this.has('js'))           {return'#icon-js'}
              if(this.has('kotlin'))       {return'#icon-kotlin'}
              if(this.has('perl'))         {return'#icon-perl'}
              if(this.has('python'))       {return'#icon-Python'}
              if(this.has('ruby'))         {return'#icon-ruby-plain'}
              if(this.has('rust'))         {return'#icon-rust'}
              if(this.has('lua'))          {return'#icon-lua'}
              if(this.has('npm'))          {return'#icon-npm1'}
              if(this.has('kafka'))        {return'#icon-kafka1'}
              if(this.has('html'))         {return'#icon-html'}
              if(this.has('mysql'))        {return'#icon-mysql'}
              if(this.has('redis'))        {return'#icon-redis_huaban'}
              if(this.has('linux'))        {return'#icon-Linux'}
              if(this.has('nodejs'))       {return'#icon-nodejs'}
              if(this.has('vue'))          {return'#icon-vue'}
              if(this.has('maven'))        {return'#icon-Neuxs-maven'}
              if(this.has('springboot'))   {return'#icon-icon-spring-boot'}
              if(this.has('springcloud'))  {return'#icon-Asset'}
              if(this.has('rabbitmq'))     {return'#icon-RabbitMQ'}
              if(this.has('windows'))      {return'#icon-windows'}
              if(this.has('electron'))     {return'#icon-electron'}
              if(this.has('elasticsearch')){return'#icon-Elasticsearch'}
              if(this.has('postman'))      {return'#icon-postman'}
              if(this.has('spring'))       {return'#icon-spring'}
              if(this.has('nginx'))        {return'#icon-Nginx'}
              if(this.has('android'))      {return'#icon-spring-android'}
              if(this.has('jetbrains'))    {return'#icon-cib-jetbrains'}
              if(this.has('tengxunyun'))   {return'#icon-qcloud'}
              if(this.has('aliyun'))       {return'#icon-aliyun1'}
              if(this.has('google'))       {return'#icon-guge'}
              if(this.has('wechat'))       {return'#icon-weixin'}
              if(this.has('leetcode'))     {return'#icon-LeetCode'}
              if(this.has('hive'))         {return'#icon-Apache_Hive_logo'}
              if(this.has('spark'))        {return'#icon-Apache_Spark_logo'}
              if(this.has('github'))       {return'#icon-gitignore-icon-active'}
              if(this.has('git'))          {return'#icon-GIT'}
              if(this.has('zookeeper'))    {return'#icon-zookeeper'}
              if(this.has('ocr'))          {return'#icon-OCRshibie'}
              if(this.has('css'))          {return'#icon-css'}
              if(this.has('ios'))          {return'#icon-ios'}
              if(this.has('react'))        {return'#icon-react'}
              if(this.has('k8s'))          {return'#icon-ks'}
              if(this.has('vscode'))       {return'#icon-file_type_vscode'}
              if(this.has('grafana'))      {return'#icon-grafana'}
              if(this.has('apache'))       {return'#icon-apache-line-wordmark'}
              if(this.has('excel'))        {return'#icon-excel'}
              if(this.has('map'))          {return'#icon-map'}
              if(this.has('计算机基础'))    {return'#icon-computergame'}
              if(this.has('分布式'))       {return'#icon-fenbushi'}

              // 语言类
              if(this.has('java'))         {return'#icon-java1'}
              if(this.has('go'))           {return'#icon-go2'}
              if(this.has('vb'))           {return'#icon-vb'}
              if(this.has('php'))          {return'#icon-php'}
              if(this.has('swift'))        {return'#icon-swift'}

              if(this.has('c语言'))    {return'#icon-Cyuyan'}
              if(this.has('链表'))     {return'#icon-lianjie'}
              if(this.has('数组'))     {return'#icon-shuzu'}
              if(this.has('树'))       {return'#icon-shuzhuangtu'}
              if(this.has('算法'))     {return'#icon-suanfafenxi'}
              if(this.has('数据结构')) {return'#icon-shujujiegou-01'}
              if(this.has('设计模式')) {return'#icon-er-beitimoshi'}

              return '#icon-swift'
            }
        },
        methods: {
            has (target) {
                return this.tags.toLocaleLowerCase().indexOf(target) !== -1;
            },
            isNull () {
              return this.tags === null || this.tags.length === 0
            }
        },
        watch: {
            tags (arr) {
                console.log(arr)
            }
        }
    }
</script>

<style scoped>

</style>
